<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col v-if="type === 'ZJ'" :span="24">
          <el-form-item :label="$t('中介机构')" prop="mediationId">
            <el-col :span="20">
              <el-select v-model="form.mediationId" size="small" clearable :placeholder="$t('请选择')" @change="queryZJTeamHandle(form.mediationId, 'select')">
                <el-option
                  v-for="item in mediationBaseOptions"
                  :key="item.id"
                  :label="item.mediationShortName"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button v-hasPermi="['deal:mediation:edit']" @click="addMediationBase">{{ $t('添加') }}</el-button>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'ZJ'" :span="24">
          <el-form-item :label="$t('团队名称')" prop="mediationTeamId">
            <el-col :span="20">
              <el-select v-model="form.mediationTeamId" size="small" clearable :placeholder="$t('请选择')" @change="queryZJTeamMemberHandle(form.mediationTeamId, 'select')">
                <el-option
                  v-for="item in mediationTeamOptions"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button v-hasPermi="['mediation:team:edit']" @click="addMediationTeam(form.mediationId)">{{ $t('添加') }}</el-button>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'ZJ'" :span="24">
          <el-form-item :label="$t('用户名称')" prop="mediationTeamMemberId">
            <el-col :span="20">
              <el-select v-model="form.mediationTeamMemberId" size="small" clearable :placeholder="$t('请选择')" @change="setTeamMemberData">
                <el-option
                  v-for="item in mediationTeamMemberOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button v-hasPermi="['mediation:team:edit']" @click="addMediationMember(form.mediationTeamId)">{{ $t('添加') }}</el-button>
            </el-col>
          </el-form-item>
        </el-col>
        <!--        <el-col v-if="type === 'QT'" :span="24">
          <el-form-item :label="$t('团队名称')" prop="teamName">
            <el-input v-model="form.teamName" :placeholder="$t('团队名称')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>-->
        <el-col v-if="type === 'QT'" :span="24">
          <el-form-item :label="$t('姓名')" prop="userName">
            <el-input v-model="form.userName" :placeholder="$t('姓名')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'QT'" :span="24">
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input v-model="form.email" :placeholder="$t('邮箱')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn />
    </div>

    <!-- 添加或修改中介机构对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <mediationBaseForm ref="mediationBaseForm" />
    </el-dialog>

    <!-- 添加或修改中介机构服务团队对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="teamFormOpen" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <mediationTeamForm ref="mediationTeamForm" />
    </el-dialog>

    <!-- 添加或修改中介机构服务团队_团队人员对话框 -->
    <el-dialog :title="$t('团队人员')" :visible.sync="memberFormOpen" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <mediationTeamMemberForm ref="mediationTeamMemberForm" :team-id="teamId" />
    </el-dialog>
  </div>
</template>

<script>
import { saveDdExternalUser, getDdExternalUser } from '@/api/dd/user/ddExternalUser'
import { findMediation } from '@/api/deal/mediation/mediationBase'
import { findDeptList } from '@/api/deal/mediation/mediationTeam/mediationTeam'
import { getMediationTeamMemberOptions } from '@/api/deal/mediation/mediationTeam/mediationTeamMember'
import mediationBaseForm from '@/views/deal/mediation/mediationBaseForm'
import mediationTeamForm from '@/views/deal/mediation/mediationTeam/mediationTeamForm'
import mediationTeamMemberForm from '@/views/deal/mediation/mediationTeam/mediationTeamMemberForm'

export default {
  components: {
    mediationBaseForm,
    mediationTeamForm,
    mediationTeamMemberForm
  },
  data() {
    const checkEmail = (rule, value, callback) => {
      if (value === '' || value === undefined || value === null) {
        callback(new Error(this.$t('必填信息')))
      } else {
        const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (!reg.test(value)) {
          callback(new Error(this.$t('请输入有效的邮箱')))
        } else {
          callback()
        }
      }
    }
    return {
      // 表单参数
      form: {},
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {
        mediationId: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        mediationTeamId: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        mediationTeamMemberId: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        teamName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        userName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        email: [{ required: true, validator: checkEmail, trigger: 'change' }]
      },
      // 团队类型
      type: undefined,
      // 中介机构数据
      mediationBaseOptions: [],
      // 中介机构团队数据
      mediationTeamOptions: [],
      // 中介机构团队人员数据
      mediationTeamMemberOptions: [],
      // 是否显示弹出层
      formOpen: false,
      teamFormOpen: false,
      memberFormOpen: false,
      // 弹出层标题
      title: '',
      teamId: undefined
    }
  },
  created() {
    findMediation().then(Response => {
      this.mediationBaseOptions = Response.data
    })
  },
  methods: {
    // 初始化数据
    init(data, type) {
      this.loading = true
      this.type = type
      if (data != null && data.id !== undefined) {
        getDdExternalUser(data.id).then(response => {
          this.form = response.data
          if (type === 'ZJ') {
            this.queryZJTeamHandle(this.form.mediationId, 'init')
            this.queryZJTeamMemberHandle(this.form.mediationTeamId, 'init')
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.reset()
        this.mediationTeamOptions = []
        this.mediationTeamMemberOptions = []
        this.form.type = type
        if (type === 'QT') {
          this.form.teamName = this.$route.query.id + '-被投企业团队'
        }
        this.loading = false
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dealId: this.$route.query.id,
        type: this.type,
        mediationId: undefined,
        mediationTeamId: undefined,
        mediationTeamMemberId: undefined,
        teamName: undefined,
        userName: undefined,
        email: undefined,
        status: 'Y',
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList(this.type)
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveDdExternalUser(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询中介机构团队数据
    queryZJTeamHandle(data, type) {
      if (type === 'select') {
        this.form.mediationTeamId = undefined
        this.form.mediationTeamMemberId = undefined
      }
      if (data) {
        findDeptList({ mediationId: data }).then(Response => {
          this.mediationTeamOptions = Response.data
        })
      } else {
        this.mediationTeamOptions = []
        this.mediationTeamMemberOptions = []
      }
    },
    // 查询中介机构团队人员数据
    queryZJTeamMemberHandle(data, type) {
      if (type === 'select') {
        this.form.mediationTeamMemberId = undefined
      }
      if (data) {
        getMediationTeamMemberOptions({ teamId: data }).then(Response => {
          this.mediationTeamMemberOptions = Response.rows
        })
      } else {
        this.form.mediationTeamMemberId = undefined
        this.mediationTeamMemberOptions = []
      }
    },
    setTeamMemberData(data) {
      const member = this.mediationTeamMemberOptions.find(member => member.id === data)
      if (member) {
        this.form.userName = member.name
        this.form.email = member.email
        this.form.status = member.status
      }
      const team = this.mediationTeamOptions.find(member => member.id === this.form.mediationTeamId)
      if (team) {
        this.form.teamName = team.deptName
      }
    },
    addMediationBase() {
      this.formOpen = true
      this.title = this.$t('中介机构')
      this.$nextTick(() => {
        this.$refs.mediationBaseForm.init(null)
      })
    },
    addMediationTeam(data) {
      if (this.form.mediationId) {
        this.teamFormOpen = true
        this.title = this.$t('服务团队')
        this.$nextTick(() => {
          this.$refs.mediationTeamForm.initData(data)
        })
      } else {
        this.msgError('请先添加中介机构')
      }
    },
    addMediationMember(data) {
      if (this.form.mediationTeamId) {
        this.memberFormOpen = true
        this.title = this.$t('团队人员')
        this.teamId = data
        this.$nextTick(() => {
          this.$refs.mediationTeamMemberForm.init(null)
        })
      } else {
        this.msgError('请先添加服务团队')
      }
    },
    processingDataEcho(data, type) {
      if (type === 'mediationBaseForm') {
        this.mediationBaseOptions.unshift(data)
        this.form.mediationId = data.id
        this.queryZJTeamHandle(data.id, 'select')
      }
      if (type === 'mediationTeamForm') {
        this.mediationTeamOptions.unshift(data)
        this.form.mediationTeamId = data.id
        this.queryZJTeamMemberHandle(data.id, 'select')
      }
      if (type === 'mediationTeamMemberForm') {
        this.mediationTeamMemberOptions.unshift(data)
        this.form.mediationTeamMemberId = data.id
        console.log(data)
        this.setTeamMemberData(data.id)
      }
    }
  }
}
</script>
